
import React, { lazy } from "react"

// Navigate重定向组件
import { Navigate } from "react-router-dom"

import Home from "../views/Home"


// import About from "../views/About"
// import User from "../views/User"

const About = lazy(() => import("../views/About"))
const User = lazy(() => import("../views/User"))
const Page1 = lazy(() => import("../views/Page1"))
const Page2 = lazy(() => import("../views/Page2"))

// 报错： A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator.
// 懒加载的模式需要我们给他添加一个Loading组件




const withLoadingComponent = (comp: JSX.Element) => (
    <React.Suspense fallback={<div>Loading...</div>}>
        {comp}
    </React.Suspense>
)

const routes = [
    {
        path: "/",
        element: <Navigate to="/page1" />
    },
    {
        path: "/",
        element:<Home></Home>,
        children:[
          {
            path: "/page1",
            element: withLoadingComponent (<Page1 />)
          },
          {
            path: "/page2",
            element: withLoadingComponent (<Page2 />)
          }
        ]
    }

    // {
    //     path: "/home",
    //     element: <Home />
    // },
    // {
    //     path: "/about",
    //     element:withLoadingComponent (<About />)
    //     // element: <React.Suspense fallback={<div>Loading...</div>}>
    //     //     <About />
    //     // </React.Suspense>
    // },
    // {
    //     path: "/user",
    //     element: withLoadingComponent (<User />)
    //     // element: <React.Suspense fallback={<div>Loading...</div>}>
    //     //     <User />
    //     // </React.Suspense>

    // }
]

export default routes
